<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 定义文档的字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面适配各种设备的宽度 -->
    <title>Document</title>
    <style>
        /* 设置所有元素的 box-sizing 属性为 border-box */
        * {
            box-sizing: border-box;
        }

        /* 设置页面布局 */
        body {
            display: flex; /* 使用 flex 布局 */
            justify-content: center; /* 内容居中对齐 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 页面高度为视窗高度 */
            margin: 0; /* 去掉默认外边距 */
            background-color: #f2f2f2; /* 设置背景颜色 */
            font-family: Arial, sans-serif; /* 设置字体 */
        }

        /* 计算器外层样式 */
        .calculator {
            width: 250px; /* 固定宽度 */
            border: 2px solid #333; /* 设置边框 */
            border-radius: 10px; /* 圆角边框 */
            overflow: hidden; /* 超出内容隐藏 */
        }

        /* 显示屏样式 */
        #display {
            width: 100%; /* 占满容器宽度 */
            padding: 15px; /* 内边距 */
            font-size: 24px; /* 字体大小 */
            text-align: right; /* 文本右对齐 */
            border: none; /* 去掉边框 */
            outline: none; /* 去掉聚焦时的边框 */
        }

        /* 按钮区域 */
        .buttons {
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(4, 1fr); /* 四列等分布局 */
        }

        /* 按钮样式 */
        button {
            padding: 20px; /* 内边距 */
            font-size: 20px; /* 字体大小 */
            border: 1px solid #333; /* 边框颜色 */
            background-color: #eaeaea; /* 按钮背景色 */
            cursor: pointer; /* 鼠标悬停变为手型 */
            transition: background-color 0.2s; /* 背景色过渡效果 */
        }

        /* 鼠标悬停时的按钮效果 */
        button:hover {
            background-color: #ccc;
        }

        /* 按钮被按下时的效果 */
        button:active {
            background-color: #999;
        }
    </style>
</head>
<body>
    <!-- 计算器容器 -->
    <div class="calculator">
        <!-- 显示屏 -->
        <input type="text" id="display" readonly> <!-- readonly 属性防止用户直接编辑内容 -->
        <!-- 按钮 -->
        <div class="buttons">
            <button onclick="clearDisplay()">C</button> <!-- 清空显示 -->
            <button onclick="deleteLast()">←</button> <!-- 删除最后一个字符 -->
            <button onclick="appendToDisplay('/')">/</button> <!-- 添加 '/' -->
            <button onclick="appendToDisplay('*')">*</button> <!-- 添加 '*' -->
            <button onclick="appendToDisplay('7')">7</button> <!-- 添加 '7' -->
            <button onclick="appendToDisplay('8')">8</button> <!-- 添加 '8' -->
            <button onclick="appendToDisplay('9')">9</button> <!-- 添加 '9' -->
            <button onclick="appendToDisplay('-')">-</button> <!-- 添加 '-' -->
            <button onclick="appendToDisplay('4')">4</button> <!-- 添加 '4' -->
            <button onclick="appendToDisplay('5')">5</button> <!-- 添加 '5' -->
            <button onclick="appendToDisplay('6')">6</button> <!-- 添加 '6' -->
            <button onclick="appendToDisplay('+')">+</button> <!-- 添加 '+' -->
            <button onclick="appendToDisplay('1')">1</button> <!-- 添加 '1' -->
            <button onclick="appendToDisplay('2')">2</button> <!-- 添加 '2' -->
            <button onclick="appendToDisplay('3')">3</button> <!-- 添加 '3' -->
            <button onclick="calculate()">=</button> <!-- 计算结果 -->
            <button onclick="appendToDisplay('0')">0</button> <!-- 添加 '0' -->
            <button onclick="appendToDisplay('.')">.</button> <!-- 添加 '.' -->
        </div>
    </div>
    <script>
        // 清空显示屏内容
        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        // 删除显示屏最后一个字符
        function deleteLast() {
            let display = document.getElementById('display');
            display.value = display.value.slice(0, -1); // 删除最后一个字符
        }
        // 向显示屏追加字符
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

        // 计算表达式结果
        function calculate() {
            let display = document.getElementById('display');
            try {
                display.value = eval(display.value); // 使用 eval 计算结果
            } catch (error) {
                display.value = 'Error'; // 捕获错误并显示 'Error'
            }
        }
    </script>
</body>
</html>
